<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-09-24 11:28:47
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-09 09:33:42
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import FooterNav from '@/components/FooterNav.vue'
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const showFooter = ref(true);

// 监听路由变化，根据需要显示或隐藏底部导航
watch(() => route.path, (newPath) => {
  if(newPath === '/home') {
    showFooter.value = newPath;
  } else if(newPath === '/scene') {
    showFooter.value = newPath;
  } else if(newPath === '/mall') {
    showFooter.value = newPath;
  } else if(newPath === '/project') {
    showFooter.value = newPath;
  } else if(newPath === '/myCenter') {
    showFooter.value = newPath;
  } else {
    showFooter.value = false;
  }
});
</script>

<template>
  <div>
    <router-view></router-view>
    <FooterNav v-if="showFooter" />
  </div>

</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
